import { Component, OnInit, Input, ElementRef, Optional, Inject, ContentChildren, QueryList, HostBinding, AfterContentInit, AfterContentChecked, AfterViewInit } from '@angular/core';

import { BaseView } from '../../../core/view/base-view';
import { FOOTER_COPYRIGHT_COM_TYPE } from '../../keys';
import { ViewPanelComponent } from '../view-panel/view-panel.component';
import { QueryPanelComponent } from '../../query-panel/query-panel.component';
import { TablePanelComponent } from '../../table-panel/table-panel.component';

@Component({
  selector: 'bz-view-main',
  templateUrl: './view-main.component.html'
})
export class ViewMainComponent<U, B, S> extends BaseView<U, B, S> implements OnInit, AfterViewInit, AfterContentChecked {

  /** 是否显示底部页脚 */
  @Input() bzShowFooter = false;
  @ContentChildren(ViewPanelComponent) panelsRef: QueryList<ViewPanelComponent>;
  @ContentChildren(QueryPanelComponent) queryPanelsRef: QueryList<QueryPanelComponent<U, B, S>>;
  @ContentChildren(TablePanelComponent) tablePanelsRef: QueryList<TablePanelComponent<U, B, S>>;
  @HostBinding('class.ghost-panel') ghostPanel = false;
  @Input() @HostBinding('class.ghost-panel-transparent') bzGhostPanelTransparent = false;
  @Input() bzAutoGhostPanel = false;

  viewPanels = [];
  queryPanels = [];
  tablePanels = [];
  constructor(
    public ele: ElementRef,
    @Optional() @Inject(FOOTER_COPYRIGHT_COM_TYPE) public footerCopyComType: any,
  ) {
    super();
  }

  ngAfterViewInit(): void {
    setTimeout(() => {
      const formFooter = document.querySelector('bz-form-footer');
      if (formFooter) {
        this.ele.nativeElement.style.paddingBottom = `calc(${window.getComputedStyle(formFooter).getPropertyValue('height')} + 16px)`;
      }
    }, 3000);
    if (this.bzAutoGhostPanel) {
      setTimeout(() => {
        this.viewPanels = this.ele.nativeElement.querySelectorAll('bz-view-panel');
        this.queryPanels = this.ele.nativeElement.querySelectorAll('bz-query-panel');
        this.tablePanels = this.ele.nativeElement.querySelectorAll('bz-table-panel');
        this.ghostPanel = this.viewPanels.length === 0 && this.queryPanels.length === 0 && this.tablePanels.length === 0;
      }, 300);
    }
  }

  ngAfterContentChecked(): void {
    if (this.bzAutoGhostPanel) {
      // this.ghostPanel = this.panelsRef.length === 0 && this.queryPanelsRef.length === 0 && this.tablePanelsRef.length === 0;
      // this.ghostPanel = this.viewPanels.length === 0 && this.queryPanels.length === 0 && this.tablePanels.length === 0;
    }

  }

  ngOnInit() {
    // this.ngZone.runOutsideAngular(() => {
    //   setTimeout(() => {
    //     this.ele.nativeElement.style.overflowY = 'auto';
    //   }, 500);
    // });
  }

}
